<template>
	<view class="hot-digest">
		<uni-section title="热点文章-阅读文章参与答题可获取积分" type="line">
			<!-- 使用scroll-view实现横向滑动 -->
			<scroll-view class="digest-scroll" scroll-x="true" show-scrollbar="false">
				<view class="digest-list">
					<DigestItem v-for="digest in digestList" :key="digest.id" :id="Number(digest.id)"
						:title="digest.generatedTitle || '无标题'"
						:summary="digest.summaryContent || digest.generatedArticle || '暂无内容'"
						@click="handleDigestClick" />
				</view>
			</scroll-view>

			<view class="loading-text" v-if="loading">
				正在加载...
			</view>
			<view class="empty-state" v-else-if="digestList.length === 0">
				<text>暂无热点文章</text>
			</view>
		</uni-section>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { listDigest, type DigestDetail } from '@/api/digest/digest'
	import DigestItem from './DigestItem.vue'

	const loading = ref(false)
	const digestList = ref<DigestDetail[]>([])

	// 格式化时间
	const formatTime = (timeStr : string) => {
		if (!timeStr) return ''
		const date = new Date(timeStr)
		const now = new Date()
		const diff = now.getTime() - date.getTime()
		const days = Math.floor(diff / (1000 * 60 * 60 * 24))

		if (days === 0) {
			const hours = Math.floor(diff / (1000 * 60 * 60))
			if (hours === 0) {
				const minutes = Math.floor(diff / (1000 * 60))
				return minutes <= 0 ? '刚刚' : `${minutes}分钟前`
			}
			return `${hours}小时前`
		} else if (days < 7) {
			return `${days}天前`
		} else {
			return date.toLocaleDateString()
		}
	}

	// 获取热点文章数据
	const fetchHotDigest = async () => {
		try {
			loading.value = true
			const res = await listDigest({
				page: 1,
				size: 10,
				sortBy: 'hot' // 按热度排序
			})

			// 根据实际返回结构获取数据
			if (res && res.rows && Array.isArray(res.rows)) {
				digestList.value = res.rows
			} else if (res && res.data && res.data.records && Array.isArray(res.data.records)) {
				digestList.value = res.data.records
			} else {
				digestList.value = []
				console.warn('未能获取到有效的digest数据:', res)
			}
		} catch (error) {
			console.error('获取热点文章失败：', error)
			uni.showToast({
				title: '获取热点文章失败',
				icon: 'none'
			})
			digestList.value = []
		} finally {
			loading.value = false
		}
	}

	// 处理文章点击事件
	const handleDigestClick = (id : number) => {
		uni.navigateTo({
			url: `/pages/digest/index?id=${id}`
		})
	}

	// 暴露刷新方法给父组件调用
	const refresh = async () => {
		await fetchHotDigest()
	}

	// 组件挂载时获取数据
	onMounted(() => {
		fetchHotDigest()
	})

	// 暴露方法给父组件
	defineExpose({
		refresh
	})
</script>

<style lang="scss" scoped>
	.hot-digest {
		background: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.digest-scroll {
		width: 100%;
		white-space: nowrap;
	}

	.digest-list {
		padding: 20rpx;
		display: flex;
		flex-wrap: nowrap;
	}

	// 加载提示文字
	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background-color: #f7f7f7;
		padding: 20rpx 0;
	}

	// 空状态
	.empty-state {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
</style>